<template>
  <div class="component-item" :class="active?'selected':''" v-if="moduleData">
    <div class="flex center preview-item-top">
      <div class="del" @click.stop="delModule">
        <Icon type="ios-trash" size='22' style="color: white;" />
      </div>
    </div>
    <div class="component-content banner-wrapper">
      <div class="flex center between">
        <div class="banner-top-title">{{moduleData.label_name_cn}}</div>
      </div>
      <div class="banner-desc">{{moduleData.label_info_summary}}</div>
      
      <!-- <Carousel dots="none" v-model="curpage">
        <CarouselItem v-for='(item,index) in moduleData.data' :key="'swiper'+index">
          <div class="banner-content">
            <div class="banner-img" :style="'background-image: url(\''+item.image_url+'\');'"></div>
            <div class="banner-title">{{item.title}}</div>
            <div class="banner-subtitle">{{item.sub_title}}</div>
          </div>
        </CarouselItem>
      </Carousel> -->
    </div>
  </div>
</template>

<script>

export default {
    name: 'DistanceChannelModule',   
  props: {
    /**
       * @description 起始值，即动画开始前显示的数值
       */
      moduleData: {
        type: Object,
        default: null
      },
      active: {
        type: Boolean,
        default: false
      }
  },
    data () {
        return {
          curpage: 0
      }
    },
    methods: {
      delModule() {
      this.$emit("delModule",this.moduleData);    
      }
    },
    created() {
      console.log('---')
      console.log(this.moduleData)
    },
    components: {
  }
 }
</script>

<style scoped>

@import url("../baseModule.less");

.banner-top-title{font-size: 22px;color: #333;font-weight: bolder;line-height: 1.1;}
.banner-desc {
  font-size: 14px;
  color: #999;
  padding: 8px 0px 16px;
}
.curpage {
  font-size: 23px;
  color: #333;
}
.totalpage {
  line-height: 1.1;
  color: #999;
  transform: translateY(1px);
  font-size: 17px;
}
.banner-content {
  width: 100%;
}
.banner-img {
  width: 100%;
  height: 180px;
  background-repeat: no-repeat !important;
  background-size: cover!important;
  background-position: center!important;
}
.banner-title {
  font-size: 18px;
  color: #333;
  margin-top: 16px;
  font-weight: bolder;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.banner-subtitle {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
